<template>
	<view class="delivery-container">
		<!-- 添加配送地址按钮 -->
		<view class="add-delivery">
			<uni-icons type="plusempty" size="24"></uni-icons>
			<text class="add-text"  @click="addDelivery">新增配送地址</text>
			<uni-icons type="settings" size="18" class="manage-icon" @click="toggleManageMode">
				{{ isManaging ? '完成' : '管理' }}
			</uni-icons>
		</view>

		<!-- 遍历配送记录 -->
		<view v-for="(delivery, index) in deliveryList" :key="delivery.deliveryId" class="delivery-item">
			<!-- 地址信息 -->
			<view class="info">
				<text class="address">{{ delivery.address }}</text>
				<text class="contact">
					{{ delivery.contactName }} - {{ delivery.contactPhone }}
				</text>
			</view>
			<!-- 修改地址按钮 -->
			<uni-icons
				v-if="!isManaging"
				type="compose"
				size="24"
				class="edit-icon"
				@click="editDelivery(delivery)"
			></uni-icons>

			<!-- 删除地址按钮 -->
			<view
				v-if="isManaging"
				class="delete-button"
				@click="openDeletePopup(delivery.deliveryId)"
			>
				<uni-icons type="trash" size="24" color="red"></uni-icons>
				<text class="delete-text">删除</text>
			</view>
		</view>

		<!-- 删除确认弹窗 -->
		<uni-popup ref="deletePopup" type="dialog">
		  <view class="popup-content">
		    <text class="confirm-text">确定要删除该配送地址吗？</text>
		    <view class="popup-buttons">
		      <button type="default" class="cancel-button" @click="cancelDelete">取消</button>
		      <button type="warn" class="confirm-button" @click="confirmDelete">确认</button>
		    </view>
		  </view>
		</uni-popup>

	</view>
</template>
<script>
import { getDelivery, deleteDelivery } from "../../../api/delivery/delivery.js";

export default {
	data() {
		return {
			deliveryList: [], // 配送记录列表
			userId: null, // 用户ID
			isManaging: false, // 是否处于管理模式
			deleteId: null, // 待删除的地址ID
		};
	},
	onShow() {
		this.loadUserIdAndDeliveryList();
	},
	methods: {
		// 加载用户ID并获取配送列表
		loadUserIdAndDeliveryList() {
			if (!this.userId) {
				this.$store
					.dispatch("GetInfo")
					.then(() => {
						this.userId = this.$store.state.user.userId;
						this.loadDeliveryList();
					})
					.catch((error) => {
						console.error("获取用户信息失败:", error);
					});
			} else {
				this.loadDeliveryList();
			}
		},
		// 加载配送列表
		async loadDeliveryList() {
			try {
				this.deliveryList = await getDelivery(this.userId);
				console.log("配送记录加载成功:", this.deliveryList);
			} catch (error) {
				console.error("加载配送记录失败:", error);
			}
		},
		// 添加配送地址
		addDelivery() {
			
				wx.navigateTo({
					url: `/pages/delivery/addDelivery/addDelivery?userId=${this.userId}`,
			});
		},
		// 修改配送地址
		editDelivery(delivery) {
				// 将需要修改的值通过 URL 参数传递
					const queryParams = encodeURIComponent(JSON.stringify(delivery));
					console.log(queryParams)
					wx.navigateTo({
						url: `/pages/delivery/update/update?delivery=${queryParams}`,
				});
		},
		// 切换管理模式
		toggleManageMode() {
			this.isManaging = !this.isManaging;
		},
	 // 打开删除确认弹窗
	  openDeletePopup(deliveryId) {
	    this.deleteId = deliveryId;
	    this.$refs.deletePopup.open();
	  },
	
	  // 取消删除
	  cancelDelete() {
	    this.deleteId = null; // 清空待删除的 ID
	    this.$refs.deletePopup.close();
	  },
	
	  // 确认删除
	  async confirmDelete() {
	    if (!this.deleteId) return;
	   
	    try {
	      // 调用删除 API
	      const success = await deleteDelivery(this.deleteId);
	
	      if (success) {
	        // 删除成功，从前端移除对应记录
	        this.deliveryList = this.deliveryList.filter(
	          (item) => item.deliveryId !== this.deleteId
	        );
	      uni.showToast({
	          title: "删除成功",
	          icon: "success",
	        });
	      } else {
	       uni.showToast({
	          title: "删除失败",
	          icon: "error",
	        });
	      }
	    } catch (error) {
	      console.error("删除失败:", error);
	     uni.showToast({
	        title: error.message || "删除失败，请稍后重试",
	        icon: "error",
	      });
	    } finally {
	      this.deleteId = null; // 清空待删除的 ID
	      this.$refs.deletePopup.close(); // 关闭弹窗
	    }
	  },
	},
};
</script>
<style scoped>
.delivery-container {
  padding: 16px;
  background-color: #e8e8e8;
}

.add-delivery {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  background-color: #ffaa00;
  border-radius: 8px;
  margin-bottom: 16px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.add-text {
  flex: 1;
  font-size: 16px;
  color: #005500;
  margin-left: 8px;
}

.manage-icon {
	padding: 10px;
	background-color: #ffe413;
  margin-left: auto;
}

.delivery-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 12px;
  background-color: #ffffff;
  border-radius: 8px;
  margin-bottom: 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.info {
  flex: 1;
}

.address {
  font-size: 16px;
  font-weight: bold;
  color: #333333;
  word-wrap: break-word; /* 允许换行 */
  white-space: normal;
  margin-top: 15px;
}

.contact {
	
  font-size: 14px;
  color: #666666;
  white-space: nowrap; /* 防止换行 */
}

.edit-icon {

  margin-left: 12px;
}

.delete-button {
  display: flex;
  align-items: center;
  color: red;
  cursor: pointer;
}

.delete-text {
  font-size: 14px;
  margin-left: 4px;
}

.popup-content {
background-color: #f0f0f0;
  padding: 20px;
  text-align: center;
}

.confirm-text {
  font-size: 16px;
  color: #333;
  margin-bottom: 20px;
}

.popup-buttons {
	margin-top: 20px;
  display: flex;
  justify-content: space-between;
}

.cancel-button,
.confirm-button {
  flex: 1;
  padding: 10px;
  margin: 0 8px;
  font-size: 14px;
  border-radius: 4px;
}

.cancel-button {
  background-color: #00aa00;
  color: #333;
}

.confirm-button {
  background-color: #ff4d4f;
  color: white;
}


</style>
